<template>
    <div class="ebook" ref="ebook">
        <EbookTitle></EbookTitle>
        <EbookReader></EbookReader>
        <EbookMenu></EbookMenu>
        <EbookBookmark></EbookBookmark>
        <EbookHeader></EbookHeader>
        <EbookFooter></EbookFooter>
    </div>
</template>

<script>
  import EbookFooter from '../../components/ebook/EbookFooter'
  import EbookHeader from '../../components/ebook/EbookHeader'
  import EbookBookmark from '../../components/ebook/EbookBookmark'
  import { ebookMixin } from '../../utils/mixin'
  import EbookReader from '../../components/ebook/EbookReader'
  import EbookTitle from '../../components/ebook/EbookTitle'
  import EbookMenu from '../../components/ebook/EbookMenu'
  import { getReadTime, saveReadTime } from '../../utils/localStorage'

  export default {
    name: 'index',
    mixins: [ebookMixin],
    components: {
      EbookFooter,
      EbookHeader,
      EbookBookmark,
      EbookMenu,
      EbookTitle,
      EbookReader
    },
    watch: {
      offsetY (v) {
        if (!this.menuVisible && this.bookAvailable) {
          if (v > 0) {
            this.move(v)
          } else if (v === 0) {
            this.restore()
          }
        }
      }
    },
    methods: {
      restore () {
        this.$refs.ebook.style.top = 0
        this.$refs.ebook.style.transition = 'all .2s linear'
        setTimeout(() => {
          this.$refs.ebook.style.transition = ''
        }, 200)
      },
      move (v) {
        this.$refs.ebook.style.top = v + 'px'
      },
      // 阅读时间 计算
      startLoopReadTime () {
        let readTime = getReadTime(this.fileName)
        if (!readTime) {
          readTime = 0
        }
        this.task = setInterval(() => {
          readTime++
          if (readTime % 30 === 0) {
            saveReadTime(this.fileName, readTime)
          }
        }, 1000)
      }
    },
    mounted () {
      this.startLoopReadTime()
    },
    beforeDestroy () {
      if (this.task) {
        clearInterval(this.task)
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import "../../assets/styles/global";

    .ebook {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
